<template>
  <div>
    <el-table v-loading.body.lock="loading" :element-loading-text="$t('loadingText')" :data="data" :border="border" :fit="fit" :style="tableStyle" :stripe="stripe" :max-height="maxHight" :show-header="showHeader" :highlight-current-row="highlightCurrentRow" :empty-text="emptyText" @row-dblclick="rowDBclick" @row-click="rowClick" @select-all="selectAllHandle" @select="selectHandle" @expand="expandHandle" :row-class-name="getRowStyle">
      <template v-for="(column,index) in columns">
        <el-table-column :key="index" v-if="column.type == null && column.operates == null" :resizable="column.resizable == null ? true :column.resizable" :prop="column.prop" :label="$t(column.label)" align="center" :width="column.width" :min-width="column.minWidth" :class-name="column.className">
          <template scope="scope" v-if="column.formatter != null && typeof(column.formatter) == 'function'">
            <span v-if="column.getTextClass != null && typeof(column.getTextClass) == 'function'" :class="column.getTextClass(scope.row,scope.column,column.getTextClass)">{{formatter(scope.row,scope.column,column.formatter)}}</span>
            <span v-else>{{formatter(scope.row,scope.column,column.formatter)}}</span>
          </template>
        </el-table-column>
        <el-table-column :key="index" v-else-if="column.type != null && column.operates == null" :resizable="column.resizable == null ? true : column.resizable" :type="column.type" :fixed="column.fixed == null ? false : column.fixed" :label="$t(column.label)" align="center" :width="column.width" :min-width="column.minWidth" :class-name="column.className">
        </el-table-column>
        <el-table-column :key="index" v-else-if="column.type == null && column.operates != null" :resizable="column.resizable == null ? true : column.resizable" :fixed="column.fixed == null ? false : column.fixed" :label="$t(column.label)" align="center" :width="column.width" :min-width="column.minWidth" :class-name="column.className">
          <template scope="scope">
            <span v-if="column.operates != null && column.operates instanceof Array">
              <el-button :key="opIndex" v-for="(op,opIndex) in column.operates" @click="handleTableOperateClick(op.actionName,scope.$index,scope.row)" :type="op.type ==null ?'primary':op.type" :icon="op.icon" size="small">{{op.name}}</el-button>
            </span>
            <span v-else-if="column.operates != null && typeof(column.operates) == 'function'">
              <el-button :key="opIndex" v-for="(op,opIndex) in column.operates(scope.row,scope.column)" @click="handleTableOperateClick(op.actionName,scope.$index,scope.row)" :type="op.type ==null ?'primary':op.type" :icon="op.icon" size="small">{{op.name}}</el-button>
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-row   style="padding:10px 0">
      <el-col :xs="6" :sm="6" :md="6" :lg="6" style="text-align: left;">
        <ExportExcel :hasPagination="options.exportExc.hasPagination" :headers="options.exportExc.headers" :fileName="options.exportExc.fileName" :dataFunc="options.exportExc.dataFunc" :params="options.exportExc.params" :dataFunc2="options.exportExc.dataFunc2" :params2="options.exportExc.params2"></ExportExcel>
      </el-col>
      <el-col  :xs="18" :sm="18" :md="18" :lg="18" style="text-align: right;">
          <el-pagination v-if="hasPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="options.pageIndex == null ? pageIndex : options.pageIndex" :page-sizes="pageSizes" :page-size="options.pageSize == null ? pageSize : options.pageSize" :layout="layout" :total="options.total == null ? total : options.total">
          </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>

import ExportExcel from 'components/ExportExcel.vue'
const ClickAction = {
  cellDoubleClickedHandle: 'cellDoubleClickedHandle',
  cellClickedHandle: 'cellClickedHandle',
  refreshActionHandle: 'refreshActionHandle',
  defaultAction: 'defaultAction'
};
export default {
  components: {
    ExportExcel
  },
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        };
      }
    },
    detailExpand: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      loading: false,
      pageSize: 10,
      pageIndex: 1,
      total: 10,
      pageSizes: [10, 20, 50, 100],
      layout: "total, sizes, prev, pager, next, jumper",

      currentSelectRow: '',
      selectRows: []
    };
  },
  methods: {
    getRowStyle(row, index) {
      return row.style;
    },
    //事件
    formatter(row, column, formatterFunc) {
      if (typeof (formatterFunc) == 'function') {
        return formatterFunc(row, column);
      }
      return row[column.property];
    },
    rowDBclick(row, ev) {
      this.$emit(ClickAction.cellDoubleClickedHandle, row, ev);
    },
    rowClick(row, ev, column) {
      this.$emit(ClickAction.cellClickedHandle, row, ev);
    },
    selectAllHandle(selection) {
      this.selectRows = selection;
      if (selection.length > 0) {
        //获取到当前所选中行的最后一行数据
        this.currentSelectRow = selection[selection.length - 1];
      } else {
        this.currentSelectRow = {};
      }
    },
    selectHandle(selection, row) {
      this.selectRows = selection;
      if (selection.includes(row)) {
        this.currentSelectRow = row;
      } else {
        if (selection.length > 0) {
          //获取到当前所选中行的最后一行数据
          this.currentSelectRow = selection[selection.length - 1];
        } else {
          this.currentSelectRow = {};
        }
      }
    },
    handleSizeChange(val) {
      this.options.pageSize = val;
      let currentPage = this.pageIndex;
      if (this.options && this.options.pageIndex) {
        currentPage = this.options.pageIndex
      }
      this.$emit(ClickAction.refreshActionHandle, currentPage, val);
    },
    handleCurrentChange(val) {
      let pageSize = this.pageSize;
      if (this.options && this.options.pageSize) {
        pageSize = this.options.pageSize
      }
      this.options.pageIndex = val;
      this.$emit(ClickAction.refreshActionHandle, val, pageSize);
    },
    handleTableOperateClick(actionName, index, row) {
      if (actionName == null) {
        this.$emit(ClickAction.defaultAction, index, row);
      } else {
        this.$emit(actionName, index, row);
      }
    },
    expandHandle(row, expanded) {
      this.$emit('expandHandle', row, expanded);
    },
    export(type) {
      if (!type || type.toLowerCase() == 'xlsx') {

      }
    }
  },
  computed: {
    // 是否分页
    hasPagination() {
      if (this.options != null && this.options.hasPagination != null) {
        return this.options.hasPagination;
      }
      return true;
    },
    // 是否有边框
    border() {
      if (this.options != null && this.options.border != null) {
        return this.options.border;
      }
      return true;
    },
    // 是否自动撑开
    fit() {
      if (this.options != null && this.options.fit != null) {
        return this.options.fit;
      }
      return true;
    },
    // 是否为斑马纹
    stripe() {
      if (this.options != null && this.options.stripe != null) {
        return this.options.stripe;
      }
      return false;
    },
    // Table的最大高度
    maxHight() {
      if (this.options != null && this.options.maxHight != null) {
        return this.options.maxHight;
      }
      return '';
    },
    // 是否显示表头
    showHeader() {
      if (this.options != null && this.options.showHeader != null) {
        return this.options.showHeader;
      }
      return true;
    },
    // 高亮当前行
    highlightCurrentRow() {
      if (this.options != null && this.options.highlightCurrentRow != null) {
        return this.options.highlightCurrentRow;
      }
      return true;
    },
    // 空时的文本显示
    emptyText() {
      if (this.options != null && this.options.emptyText != null) {
        return this.options.emptyText;
      }
      return this.$t('no data2');
    },
    // 表的样式
    tableStyle() {
      if (this.options != null && this.options.tableStyle != null) {
        return this.options.tableStyle;
      }
      return 'width: 100%';
    },
    // 数据
    data() {
      if (this.options != null && this.options.data != null && this.options.data instanceof Array) {
        setTimeout(() => {
          this.loading = false;
        }, 1000);
        return this.options.data;
      }
      return [];
    },
    // 列名
    columns() {
      if (this.options != null && this.options.columns != null && this.options.columns instanceof Array) {
        return this.options.columns;
      }
      return [];
    }
  }
}
</script>
<style scoped>
.elpagination {
  margin-top: 10px;
  margin-bottom: 30px;
  text-align:justify;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 30%;
}
</style>
